<template>
<div class="my-article-warp">
    <p class="label">管理文章</p>
    <div class="my-article-list-warp">
        <myArticleList :isLoading="isArticleLoading" :myArticleList="myArticleListData"></myArticleList>
    </div>
    <div v-if="isHaveMoreDataBtn">
        <div  v-if="isHaveArticleData" ><el-button class="more-data-btn" @click="moreArticleBtnClick" type="primary" :loading="isArticleLoading">{{isArticleLoading?"加载中":"点击加载更多"}}</el-button></div>
        <div v-else><el-button class="have-no-data-info" disabled>已经没有了呀</el-button></div>
    </div>
    <!-- <div><button @click="test">tianjia</button></div> -->
</div>
</template>

<script>
import {request} from '@/network/request.js';
import myArticleList from '@/components/profileComponents/myArticleList';
export default {
    name:"myArticle",
    components:{
        myArticleList
    },
    data(){
        return {
            myArticleListData:[],
            isHaveArticleData:true,
            isArticleLoading:false,
            articleListIndex:0,
            isHaveMoreDataBtn:false
        }
    },
    methods:{
        // test(){
        //     this.myArticleListData.push({
        //         articleId:"123",
        //         title:"ffff",
        //         goodCount:541,
        //         commentCount:23,
        //         createTime:"1997-11-04",
        //         status:"published"
        //     },{
        //         articleId:"223",
        //         title:"ffff",
        //         goodCount:541,
        //         commentCount:23,
        //         createTime:"1997-11-04",
        //         status:"published"
        //     })
        //     let obj={};
        //     this.myArticleListData = this.myArticleListData.reduce((item,next)=>{
        //         obj[next.articleId]?"":obj[next.articleId]=true&&item.push(next);
        //         return item;
        //     },[]);
        // },
        moreArticleBtnClick(){
        this.isArticleLoading=true;
        this.articleListIndex++;
        request({
        url:"/article/myArticleList/"+this.$store.getters.getCurrentUser.userId+"/"+this.articleListIndex
        }).then(res=>{
        if(res.data.myArticleListData.length>0){
            //拿过来的数据去重
            let obj={};
            this.myArticleListData = this.myArticleListData.concat(res.data.myArticleListData).reduce((item,next)=>{
                obj[next.articleId]?"":obj[next.articleId]=true&&item.push(next);
                return item;
            },[]);
            this.isArticleLoading=false;
            this.isHaveArticleData=true;
        }else{
            this.isArticleLoading=false;
            this.isHaveArticleData=false;
        }
        }).catch(err=>{
        console.log(err);
        this.$message.error('获取数据失败，请稍后再试');
        this.isArticleLoading=false;
        this.isHaveArticleData=true;
        this.articleListIndex--;
        })
    }
    },
    created(){
        //去请求数据
        request({
            url:"/article/myArticleList/"+this.$store.getters.getCurrentUser.userId+"/"+0
        }).then(res=>{
            console.log(res);
            this.myArticleListData=res.data.myArticleListData;
            if(res.data.myArticleListData.length>=10){
                this.isHaveMoreDataBtn=true;
            }
        }).catch(err=>{
            console.log(err);
        })
    }
}
</script>

<style>

</style>